<script setup lang="ts">
import { ref } from 'vue';
import type { IExportJson } from '@/components/mt-edit/components/types';
import { useGenThumbnail } from '@/components/mt-edit/composables/thumbnail';
import { MtEdit } from '@/export';
import { ElButton, ElDialog } from 'element-plus';
import { globalStore } from '@/components/mt-edit/store/global';

import demo27 from '/svgs/管道5.svg?raw';

// 控制弹窗显隐
const dialogVisible = ref(false);
// 保存计算结果
const previewTotal = ref(0);

const onPreviewClick = (exportJson: IExportJson) => {
  console.log(exportJson);
  let total = 0;
  exportJson.json.forEach((item) => {
    let sum = 0;
    // 只考虑 text 和 text2，按 text * (text2 / 24) 计算
    if (item.props.text && item.props.text2 && item.props.text3) {
      sum = Number(item.props.text) * Number(item.props.text2) * (Number(item.props.text3) / 24);
    }
    total += sum;

    if (item.title === '管道') {
      const el = document.querySelector('#' + item.id).children[0].children[0].children[0];
      el.style['object-fit'] = 'cover';
      el.src = `data:image/svg+xml,${encodeURIComponent(demo27)}`;
    }

    // 例如type是"pump"的组件变色
    item.active = item.title === '管道-蓄水';
  });

  previewTotal.value = total;
  dialogVisible.value = true;
};

const onSaveClick = (e: IExportJson) => {
  console.log(e, '这是要保存的数据');
};

const onReturnClick = () => {
  // 可自定义返回逻辑
};

const onThumbnailClick = () => {
  useGenThumbnail();
};
</script>

<template>
  <div class="w-1/1 h-100vh">
    <mt-edit
      :use-thumbnail="true"
      @on-preview-click="onPreviewClick"
      @on-return-click="onReturnClick"
      @on-save-click="onSaveClick"
      @on-thumbnail-click="onThumbnailClick"
    ></mt-edit>

    <!-- 预览弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="能耗计算结果"
      width="500px"
      :close-on-click-modal="false"
    >
      <div style="font-size: 30px">1天：{{ (previewTotal * 24).toFixed(1) }} kWh</div>

      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>
